<!doctype html>
<html lang="en" class="light">
	<head>
		<meta charset="UTF-8"/>
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
		<meta name="renderer" content="webkit"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<script type="text/javascript">
			(function(c,l,a,r,i,t,y){
				c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
				t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
				y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
			})(window, document, "clarity", "script", "qxlu5c8db0");
		</script>
		<!-- Google tag (gtag.js) -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=G-82PWC15VQC"></script>
		<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', 'G-82PWC15VQC');
		</script>
		<title>devinggo</title>
	</head>

	<body>
		<noscript>
			<strong>你的浏览器未开启javascript支持，请开启后刷新页面访问！</strong>
		</noscript>
		<div id="app" class="ma-ui">
			<div class="app-loading">
				<div class="app-loading__logo"><img src="/logo.svg"/></div>
				<div class="app-loading-text">
					<span class="app-loading-preloader">D</span>
					<span class="app-loading-preloader">e</span>
					<span class="app-loading-preloader">v</span>
					<span class="app-loading-preloader">i</span>
					<span class="app-loading-preloader">n</span>
					<span class="app-loading-preloader">g</span>
					<span class="app-loading-preloader">g</span>
					<span class="app-loading-preloader">o</span>
					<div class="app-loading-viewtext-container">
						<span class="app-loading-viewtext">D</span>
						<span class="app-loading-viewtext">e</span>
						<span class="app-loading-viewtext">v</span>
						<span class="app-loading-viewtext">i</span>
						<span class="app-loading-viewtext">n</span>
						<span class="app-loading-viewtext">g</span>
						<span class="app-loading-viewtext">g</span>
						<span class="app-loading-viewtext">o</span>
					</div>
				</div>
			</div>
		</div>
		<style>:root
		{
			--ui-background: 255 255 255;
		}
		.dark {
			--ui-background: 49 49 50;
		}
		html,
		body,
		#app {
			height: 100%;
			overflow: hidden;
			transition-property: filter;
			transition-duration: 1s;
		}
		.app-loading {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.app-loading__logo {
			width: 78px;
			padding-left: 5px;
			margin-top: -5%;
		}

		.app-loading-text {
			position: relative;
			margin-top: 1rem;
		}

		.app-loading-preloader,
		.app-loading-viewtext {
			font-size: 3.5rem;
			color: #ddd;
			font-weight: bold;
		}

		.app-loading-viewtext-container {
			display: flex;
			flex-direction: row;
			position: absolute;
			letter-spacing: 4.3px;
			top: -5px;
		}

		.app-loading-viewtext {
			color: #333;
			animation: loader 4s infinite;
			transform: rotateY(-90deg);
		}

		.app-loading-viewtext-container span:nth-child(1) {
			animation-delay: 0.2s;
		}
		.app-loading-viewtext-container span:nth-child(2) {
			animation-delay: 0.4s;
		}
		.app-loading-viewtext-container span:nth-child(3) {
			animation-delay: 0.6s;
		}
		.app-loading-viewtext-container span:nth-child(4) {
			animation-delay: 0.8s;
		}
		.app-loading-viewtext-container span:nth-child(5) {
			animation-delay: 1s;
		}
		.app-loading-viewtext-container span:nth-child(6) {
			animation-delay: 1.2s;
		}
		.app-loading-viewtext-container span:nth-child(7) {
			animation-delay: 1.4s;
		}
		.app-loading-viewtext-container span:nth-child(8) {
			animation-delay: 1.6s;
		}
		.app-loading-viewtext-container span:nth-child(9) {
			animation-delay: 1.8s;
		}

		@keyframes loader {
			0,
			75%,
			100% {
				opacity: 0;
				transform: rotateY(-90deg);
			},
			25%,
			50% {
				opacity: 1;
				transform: rotateY(0deg);
			}
		}
	</style>
	<script type="module" src="/src/main.js"></script>
</body></html>
